<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:body>
        <ui:composition template="templates/template.xhtml">
            <ui:define name="title">Nouvelle recette - Administration ShopEasy</ui:define>

            <ui:define name="content">
                <section class="wrapper style2">
                    <div class="container">
                        <div id="content">
                            <h:form id="form" >
                                <p:growl autoUpdate="true" />
                                <p:fieldset id="fRecette" legend="Nouvelle recette" style="margin-bottom:50px" > 
                                    <p:outputPanel id="formulaire" >
                                        <h:panelGrid columns="2" cellpadding="5">
                                            <p:outputLabel for="titre" value="Titre:" style="margin-right: 145px"/>
                                            <p:inputText id="titre" value="#{vueAjoutRecette.recette.titre}" required="true" style="width: 242px" />

                                            <p:outputLabel for="saison" value="Saison:"/>
                                            <p:selectOneMenu id="saison" value="#{vueAjoutRecette.recette.saison}" required="true" styleClass="vertical-align" style="width: 250px" >
                                                <f:selectItem itemLabel="Choisir" />
                                                <f:selectItem itemLabel="Indéfinie" itemValue="Indéfinie" />
                                                <f:selectItem itemLabel="Automne" itemValue="Automne" />
                                                <f:selectItem itemLabel="Été" itemValue="Été" />
                                                <f:selectItem itemLabel="Hiver" itemValue="Hiver" />
                                                <f:selectItem itemLabel="Printemps" itemValue="Printemps" />
                                            </p:selectOneMenu>

                                            <p:outputLabel for="difficulte" value="Difficulté:" />
                                            <p:selectOneMenu id="difficulte" value="#{vueAjoutRecette.recette.degreDifficulte}" required="true" styleClass="vertical-align" style="width: 250px" >
                                                <f:selectItem itemLabel="Choisir" />
                                                <f:selectItem itemLabel="Facile" itemValue="Facile" />
                                                <f:selectItem itemLabel="Moyen" itemValue="Moyen" />
                                                <f:selectItem itemLabel="Difficile" itemValue="Difficile" />                                            
                                            </p:selectOneMenu>

                                            <p:outputLabel for="typePlat" value="Type de plat:" />
                                            <p:selectOneMenu id="typePlat" value="#{vueAjoutRecette.recette.typePlat}" required="true" styleClass="vertical-align" style="width: 250px">                                            
                                                <f:selectItem itemLabel="Choisir" />
                                                <f:selectItem itemLabel="Apéritif" itemValue="Apéritif" />
                                                <f:selectItem itemLabel="Entrée" itemValue="Entrée" />
                                                <f:selectItem itemLabel="Plat" itemValue="Plat" />
                                                <f:selectItem itemLabel="Dessert" itemValue="Dessert" />
                                                <f:selectItem itemLabel="Cocktail" itemValue="Cocktail" />
                                                <f:selectItem itemLabel="Sauce" itemValue="Sauce" />
                                            </p:selectOneMenu>                                       
                                        </h:panelGrid>

                                        <h:panelGrid columns="3" cellpadding="5">
                                            <p:outputLabel for="temps" value="Temps de préparation:" style="margin-right: 5px"/>
                                            <p:spinner id="temps" value="#{vueAjoutRecette.recette.tempsPreparation}" required="true" >
                                                <f:validateLongRange minimum="5" />
                                            </p:spinner>
                                            min
                                        </h:panelGrid>

                                        <h:panelGrid columns="2" cellpadding="5" width="100%">
                                            <h:panelGrid cellpadding="5">
                                                <h4>Description: *</h4>
                                                <p:inputTextarea id="description" value="#{vueAjoutRecette.recette.description}" required="true" cols="65" rows="5" />
                                            </h:panelGrid>
                                            <h:panelGrid cellpadding="5">
                                                <h4>Préparation: *</h4>
                                                <p:inputTextarea id="preparation" value="#{vueAjoutRecette.recette.preparation}" required="true" cols="65" rows="5" />
                                            </h:panelGrid>
                                        </h:panelGrid>
                                    </p:outputPanel>

                                    <h4 style="margin-left: 10px">Ingrédients:</h4>
                                    <h:panelGrid columns="3" cellspacing="10" >                                        
                                        <p:dataTable id="lProduits" var="produit" value="#{vueAjoutRecette.produits}" selectionMode="single"
                                                     selection="#{vueAjoutRecette.produitSelectionne}" rowKey="#{produit.ean}" scrollable="true" scrollHeight="300" >
                                            <p:ajax event="rowSelect" update=":form:typeproduit" ignoreAutoUpdate="true" />                                            
                                            <p:column headerText="Disponibles" filterBy="#{produit.libelle}" filterMatchMode="contains" >
                                                <h:outputText id="unProduit" value="#{produit.libelle}" />                                                
                                            </p:column>                                            
                                        </p:dataTable>

                                        <h:panelGrid cellspacing="10" >
                                            <p:commandButton icon="ui-icon-arrowthick-1-e" actionListener="#{vueAjoutRecette.ajouterIngredient}" 
                                                             process="@this pQuantite"  update="lIngredients lProduits" />
                                            <p:commandButton icon="ui-icon-arrowthick-1-w" actionListener="#{vueAjoutRecette.supprimerIngredient}" 
                                                             process="@this lIngredients" update="lIngredients lProduits" />
                                        </h:panelGrid>

                                        <p:dataTable id="lIngredients" var="ingredient" value="#{vueAjoutRecette.ingredients}" selectionMode="single" style="margin-top: -22px" scrollHeight="300"
                                                     selection="#{vueAjoutRecette.ingredientSelectionne}" rowKey="#{ingredient.id}" scrollable="true" editable="true" editMode="cell">                                            
                                            <f:facet name="header">
                                                Ajoutés
                                            </f:facet>
                                            <p:column>
                                                <h:outputText value="#{ingredient.produit.libelle}" />
                                            </p:column>
                                            <p:column>                                                
                                                <p:cellEditor>
                                                    <f:facet name="output"><h:outputText value="#{ingredient.quantite} #{ingredient.produit.type}(s)" /></f:facet>
                                                    <f:facet name="input"><p:inputText value="#{ingredient.quantite}" style="width:100%"/></f:facet>
                                                </p:cellEditor>                                                                                                
                                            </p:column>
                                        </p:dataTable>                                                                            
                                    </h:panelGrid>

                                    <h:panelGrid columns="3" cellspacing="10" style="margin-bottom: 20px" >
                                        <p:outputLabel for="pQuantite" value="Quantité:" />
                                        <p:spinner id="pQuantite" value="#{vueAjoutRecette.quantite}">
                                            <f:validateDoubleRange minimum="0.01" />
                                        </p:spinner>
                                        <p:outputLabel id="typeproduit" value="#{vueAjoutRecette.produitSelectionne.type}" />
                                    </h:panelGrid>

                                    <p:commandButton value="Ajouter" update="@form" process="@this formulaire" actionListener="#{vueAjoutRecette.ajouterRecette}" />
                                </p:fieldset>
                            </h:form> 
                        </div>
                    </div>
                </section>
            </ui:define>            
        </ui:composition>
    </h:body>
</html>